import React from "react";
import { Tabbar } from "react-vant";
import { useLocation, useNavigate } from "react-router-dom";
import { CHILDREN_ROUTER_LIST } from "../../routes/routes";

const Index = () => {
  // 获取访问路径
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <Tabbar
      value={location.pathname}
      activeColor="#ff5500"
      onChange={(active) => navigate(active as string)}
			placeholder
    >
      {CHILDREN_ROUTER_LIST.map((v) => {
        return (
          <Tabbar.Item key={v.path} icon={v.icon} name={v.path}>
            {v.title}
          </Tabbar.Item>
        );
      })}
    </Tabbar>
  );
};

export default Index
